<template>
  <!--订单管理-订单列表 -->
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="付款时间">
          <el-date-picker
            @change="searchFn"
            v-model="formInline.date"
            type="daterange"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <!-- :default-time="['00:00:00', '23:59:59']" -->
        </el-form-item>
        <el-form-item label="付款方式">
          <el-select
            @change="searchFn"
            v-model="formInline.pay_type"
            placeholder="请选择付款方式"
          >
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="(item, index) in selectArr.pay_type"
              :key="index"
              :label="item.label"
              :value="item.real_value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="商品类型">
          <el-select v-model="formInline.region" placeholder="请选择商品类型">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="订单状态">
          <el-select
            @change="searchFn"
            v-model="formInline.status"
            placeholder="请选择订单状态"
          >
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="(item, index) in selectArr.status"
              :key="index"
              :label="item.label"
              :value="item.real_value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优惠方式">
          <el-select
            @change="searchFn"
            v-model="formInline.is_use_coupon"
            placeholder="请选择优惠方式"
          >
            <el-option label="全部" :value="null"></el-option>
            <el-option label="S端学生免费" :value="1"></el-option>
            <el-option label="优惠券" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="买家">
          <el-input
            v-model="formInline.name"
            placeholder="请输入买家姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="formInline.mobile"
            placeholder="请输入买家手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input
            v-model="formInline.order_number"
            placeholder="请输入订单编号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchFn()">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <h2>
      总收款：{{ allCountData.pay_amount }}元 &nbsp;
      <!-- 付款时间
      2019.11.19 16:30
      2019.11.19 16:30-->
      <!-- 付款方式 -->
      优惠总额：{{ allCountData.total_discount }}元 &nbsp; 订单总额：{{
        allCountData.total_amount
      }}元 &nbsp;
      <!-- 优惠总额：12435445.00元 -->
      已结算总额：{{ allCountData.pay_amount }}元 &nbsp;
    </h2>
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @cell-click="toOrderDetails"
        header-cell-class-name="thead"
      >
        <el-table-column prop="date" label="订单编号">
          <template slot-scope="scope">
            <b>{{ scope.row.order_number }}</b>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="支付金额">
          <template slot-scope="scope">
            <p>{{ scope.row.pay_amount }}</p>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="订单金额">
          <template slot-scope="scope">
            <p>{{ scope.row.order_amount }}</p>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="优惠金额">
          <template slot-scope="scope">
            <p>{{ scope.row.coupon_amount }}</p>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="优惠方式">
          <template slot-scope="scope">
            <p>{{ scope.row.is_use_coupon == 1 ? 'S端学生免费' : '暂无' }}</p>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="商品名称">
          <template slot-scope="scope">
            <p v-for="(item, index) in scope.row.goods_info" :key="index">
              {{ item.goods_name }}
            </p>
          </template>
        </el-table-column>
        <!-- <el-table-column fixed="right" label="商品类型">
          <template slot-scope="scope">
            <p v-for="(item,index) in scope.row.goods_info" :key="index">{{filterArr('goods_type',item.goods_type)}}</p>
        </template>-->
        <!-- </el-table-column> -->
        <el-table-column fixed="right" label="订单状态">
          <template slot-scope="scope">
            <p>{{ filterArr('status', scope.row.status) }}</p>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="付款时间">
          <template slot-scope="scope">
            <p>{{ scope.row.pay_time }}</p>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="支付方式">
          <template slot-scope="scope">
            <p>{{ filterArr('pay_type', scope.row.pay_type) }}</p>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="结算金额">
          <template slot-scope="scope">
            <p>{{ scope.row.amount }}</p>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="150px" label="买家姓名">
          <template slot-scope="scope">
            <p>{{ scope.row.real_name }}</p>
            <div class="u-set-phone" @click.stop="openPhone(scope.row)">
              <div>
                {{
                  openPhoneId == scope.row.id
                    ? scope.row.mobile
                    : setPhone(scope.row.mobile)
                }}
              </div>
              <div>
                <img
                  class="u-eye-img"
                  v-if="openPhoneId == scope.row.id"
                  src="../../../../assets/img/view_off.png"
                  alt
                />
                <img
                  v-else
                  class="u-eye-img"
                  src="../../../../assets/img/view_on.png"
                  alt
                />
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { queyEnumByTableName } from '@/api/api.js'
import { getOrderList, orderTotal } from '@/api/order.js'
export default {
  data () {
    return {
      selectArr: { pay_type: [], status: [] },
      value1: '',
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      formInline: {
        mobile: '',
        name: '',
        pay_type: '',
        date: [],
        status: '2',
        order_number: '',
        is_use_coupon: ''
      },
      tableData: [],
      allCountData: '',
      openPhoneId: ''
    }
  },
  created () {
    this.formInline.date = []
    var date = new Date()
    var month = parseInt(date.getMonth() + 1)
    var day = date.getDate()
    let startTime
    let endTime
    if (month < 10) month = '0' + month
    if (day < 10) day = '0' + day
    startTime = date.getFullYear() + '-' + month + '-' + '01'

    var date2 = new Date()
    var year = date2.getFullYear()
    var month2 = date2.getMonth() + 1
    month2 = month2 < 10 ? '0' + month2 : month2
    var day2 = new Date(year, month2, 0)
    endTime = year + '-' + month2 + '-' + day2.getDate()

    this.formInline.date.push(startTime)
    this.formInline.date.push(endTime)
    this.getSelectData()
  },
  methods: {
    setPhone (e) {
      if (/^1[3456789]\d{9}$/.test(e)) {
        return e.substr(0, 3) + '****' + e.substr(7)
      }
    },
    openPhone (e) {
      this.openPhoneId = e.id
      console.log(e)
    },
    // 获取订单总额
    async getAllCount () {
      let res = await orderTotal({
        'nice_order.startTime': this.formInline.date
          ? this.formInline.date[0]
          : '',
        'nice_order.endTime': this.formInline.date
          ? this.formInline.date[1]
          : '',
        'nice_order.pay_type': this.formInline.pay_type || '',
        'nice_order.status': this.formInline.status || '',
        'nice_order.name': this.formInline.name || ''
        // 'nice_order.goods_type': 0,
      })
      if (res[0]) {
        return
      }
      console.log()
      this.allCountData = res[1].data.pageList.list[0]
      this.allCountData.total_discount =
        this.allCountData.total_amount - this.allCountData.pay_amount
    },
    // 下拉菜单过滤
    filterArr (field, val) {
      let arr = this.selectArr[field]
      let label
      arr.map(item => {
        if (parseInt(val) === parseInt(item.real_value)) {
          label = item.label
        }
        if (item.children && item.children.length > 0) {
          item.children.map(item2 => {
            if (parseInt(val) === parseInt(item2.real_value)) {
              label = item.label
            }
          })
        }
      })
      return label
    },
    async getSelectData () {
      let res = await queyEnumByTableName({ tableName: 'nice_order' })
      if (res[0]) {
        return
      }
      let arr = res[1].data
      Object.keys(this.selectArr).forEach(item => {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].fieldName === item) {
            this.selectArr[item] = arr[i].child
          }
        }
      })
      this.selectArr = JSON.parse(
        JSON.stringify(this.selectArr)
          .split('display_value')
          .join('label')
          .split('child')
          .join('children')
          .split('t_id')
          .join('value')
      )
      this.getAllCount()
      this.getList()
      // console.log(this.selectArr)
      // this.selectArr.grade.unshift({ label: '全部', value: '', children: [] })
    },
    async getList () {
      // console.log(this.formInline)
      let res = await getOrderList({
        'page.currPage': this.pageIndex,
        'page.pageSize': this.pageSize,
        'nice_order.startTime': this.formInline.date
          ? this.formInline.date[0]
          : '',
        'nice_order.endTime': this.formInline.date
          ? this.formInline.date[1]
          : '',
        'nice_order.pay_type': this.formInline.pay_type || '',
        // 'nice_order.goods_type': 0,
        'nice_order.status': this.formInline.status || '',
        'nice_order.name': this.formInline.name || '',
        'nice_order.order_number': this.formInline.order_number,
        'nice_order.is_use_coupon': this.formInline.is_use_coupon,
        'nice_order.mobile': this.formInline.mobile
      })
      if (res[0]) {
        return
      }
      this.tableData = res[1].data.pageList.list
      this.totalPage = res[1].data.pageList.totalCount
      this.tableData.map(item => {
        // eslint-disable-next-line no-unused-expressions
        // item.goods_info ? (item.goods_info = JSON.parse(item.goods_info)) : []
        item.coupon_amount = parseFloat(
          item.order_amount - item.pay_amount
        ).toFixed(2)
      })
      // console.log(this.tableData)
    },
    toOrderDetails (e) {
      // console.log(e)
      this.$router.push({
        name: 'order-details',
        query: { id: e.id, type: e.type }
      })
    },
    searchFn (e) {
      this.pageIndex = 1
      this.getAllCount()
      this.getList()
    },
    addGoods () {
      this.$router.push({ name: 'add-goods' })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getList()
    }
  }
}
</script>
<style scoped>
a {
  cursor: pointer;
}
.u-set-phone {
  cursor: pointer;
  color: #1e6df5;
  display: flex;
  align-items: center;
  justify-items: center;
}
.u-eye-img {
  margin-left: 5px;
  margin-top: -3px;
}
</style>
